<!--
 * @Description: 九宫格展示组件
-->
<template>
  <div class="_ehl_tiling">
    <div class="_ehl_tiling_ctx" v-if="arr.length > 0">
      <div class="_ehl_tiling_line" v-for="(item0, index0) in arr" :key="index0">
        <template v-for="(item, index) in item0">
          <div
            :key="index + '-a'"
            v-if="item._tiling"
            class="_ehl_tiling_item"
            :style="{ 'min-width': `${minWidth}px` }"
          ></div>
          <div
            :key="index + '-b'"
            v-else
            class="_ehl_tiling_item"
            :style="{ 'min-width': `${minWidth}px` }"
          >
            <slot name="tiling" :data="item"> </slot>
          </div>
        </template>
      </div>
    </div>
    <div class="_ehl_tiling_nodata" v-else>{{ noDetaTxt }}</div>
  </div>
</template>
<script>
  export default {
    props: {
      //最小宽度
      minWidth: { type: Number, default: () => 50 },
      //每行的列数
      columns: { type: Number, default: () => 4 },
      //数据
      data: { type: Array, default: () => [] },
      //无数据显示
      noDetaTxt: { type: String, default: () => $t('common.zanwushuju') },
    },
    data() {
      return { arr: this.data }
    },
    watch: {
      data(val, old) {
        this.arr = val
        this.dealArr()
      },
    },
    created() {
      this.dealArr()
    },
    methods: {
      dealArr() {
        let re = this.arr.length % this.columns
        if (re !== 0) {
          let tmp = this.columns - (this.arr.length % this.columns)
          for (let index = 0; index < tmp; index++) {
            this.arr.push({ _tiling: true })
          }
        }
        this.arr = this.group(this.arr, this.columns)
      },
      group(array, subGroupLength) {
        let index = 0
        let newArray = []
        while (index < array.length) {
          newArray.push(array.slice(index, (index += subGroupLength)))
        }
        return newArray
      },
    },
  }
</script>
